<template>
  <!-- 顶部导航栏 -->
  <div :class="['head-bar', headBgOpacity ? 'head-bar-fixed' : '']">
    <div class="head-content">
      <!-- logo -->
      <div class="logo-wrap">
        <img class="logo" src="@/assets/images/logo-y.png" v-if="headBgOpacity">
        <img class="logo" src="@/assets/images/logo.png" v-else>
      </div>

      <!-- 导航条 -->
      <div class="nav-list font-nav-list">
        <a class="nav-item" :href="`#${item.path}`" v-for="item, index in navList" :key="index">{{ item.navigationName
        }}</a>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRequestData } from '@/hooks/requestPageData'
import { getNavigationList } from '../api/home.js'
const { getRequestData, isEqualFn } = useRequestData();

const headBgOpacity = ref(0);         // 导航条背景色
const navList = ref([]);
let timer = null;                     // 定时器

// 获取导航栏
getRequestData(navList, 'navList', () => {
  getNavigationList().then(res => {
    const data = res.result
    if (isEqualFn('navList', data)) navList.value = data;
  })
})

// 监听滚动事件 
function handlerScroll(e) {
  if (timer) return;
  timer = setTimeout(() => {
    if (window.pageYOffset > 500) {
      headBgOpacity.value || (headBgOpacity.value = 1);
    } else {
      headBgOpacity.value && (headBgOpacity.value = 0);
    }
    timer = null;
  }, 50); // 节流
}

onMounted(() => {
  window.addEventListener('scroll', handlerScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handlerScroll); // 移除滚动监听
})
</script>
 
<style lang='scss' scoped>
.head-bar {
  width: 100vw;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  transition: all .5s;
  background-color: #000;

  .head-content {
    max-width: 1500px;
    padding: 0 30px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    transition: all .1s;

    .logo-wrap {
      width: 148px;
      display: flex;
      align-items: center;

      .logo {
        width: 100%;
        object-fit: contain;
      }
    }

    .nav-list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      min-width: 506px;

      .nav-item {
        display: block;
        color: #FFFFFF;
        // margin: 0 0 0 20px;
        padding: 20px 5px;
        cursor: pointer;
        transform: all .3s;

        &:hover {
          color: #F5A439;
          text-decoration: underline;
        }

        &:active {
          color: #e23018;
        }
      }
    }
  }
}

.head-bar-fixed {
  background-color: #fff;

  .head-content {
    .nav-list {
      .nav-item {
        color: #000;
      }
    }
  }


}
</style>